<template>
  <div class="box">
    <el-card class="top">
      <el-button :icon="Plus" type="primary" @click="addWork" v-hasBtn="'addHomeWork'"
        >添加作业</el-button
      >
    </el-card>
    <el-card>
      <el-table border v-loading="isLoading" :data="workList">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="作业名称"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="所属班级" align="center">
          <template #default="{ row }">
            {{ row.classId?.className }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="实交人数" align="center">
          <template #default="{ row }">
            <el-tag>{{ row.hadNumber }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="应交人数" align="center">
          <template #default="{ row }">
            <el-tag type="success">{{ row.shouldNumber }}</el-tag>
          </template></el-table-column
        >
        <el-table-column
          prop="createUser"
          label="创建人"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="创建时间" align="center"
          ><template #default="{ row }">
            {{ formatDateTime(row.CreateAt) }}
          </template></el-table-column
        >
        <el-table-column prop="name" label="操作" width="180" align="center">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              :icon="Top"
              title="上传作业"
              @click="uploadHomeWork(row)"
              v-hasBtn="'uploadWork'"
            ></el-button>
            <el-button
              type="info"
              size="small"
              :icon="InfoFilled"
              title="作业详情"
              @click="WorkDetail(row)"
              v-hasBtn="'workDetaile'"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              title="删除作业"
              @click="deleteHomeWork(row)"
              v-hasBtn="'deleteHomeWork'"
            ></el-button> </template
        ></el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="page"
      />
    </el-card>
    <AddWork v-model="centerDialogVisible" @getWorkList="getWorkList"></AddWork>
    <el-dialog v-model="workShow" title="作业提交情况" width="800" center>
      <el-table :data="studentList" border v-loading="detaliLoading">
        <el-table-column align="center" label="学号">
          <template #default="{ row }">
            {{ row.studentId?.stuNum }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名">
          <template #default="{ row }">
            {{ row.studentId?.stuName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.state == 1">已提交</el-tag>
            <el-tag v-else type="danger">未提交</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="提交时间">
          <template #default="{ row }">
            <template v-if="row.state == 1">
              {{ formatDateTime(row.UpdateAt) }}
            </template>

            <el-tag v-else type="danger">未提交</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <el-button
              type="danger"
              :icon="Delete"
              size="small"
              @click="deleteWork(row)"
              :disabled="row.state == 0"
              v-hasBtn="'deleteStudentWork'"
              >删除作业</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <UploadWork v-model="Visible" @getWorkList="getWorkList" :parentId="parentId" :currenrId="currentId" ></UploadWork>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Plus, Top, Delete, InfoFilled } from "@element-plus/icons-vue";
import { deleteHomeWorkAPI, deleteStudentWorkAPI, getWorkDetalAPI, getWorkListAPI } from "@/api/work";
import {
  formatDate,
  formatDateTime,
  isSubmissionTimeExceeded,
} from "@/utiles/time";
import { ElMessage, ElMessageBox } from "element-plus";
import AddWork from "./AddWork/index.vue";
import UploadWork from './uploadWork/index.vue'
import { deleteStudentAPI } from "@/api/student";
let workList = ref([]);
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0);
let isLoading = ref(false);
let centerDialogVisible = ref(false);
let workShow = ref(false);
let studentList = ref([]);
let detaliLoading = ref(false);
let Visible = ref(false)
let parentId = ref('')
let currentId = ref('')
onMounted(() => {
  getWorkList();
});
const getWorkList = async () => {
  isLoading.value = true;
  let result = await getWorkListAPI(pageNo.value, pageSize.value);
  if (result.code === 200) {
    workList.value = result.data.list;
    total.value = result.data.total;
  }
  isLoading.value = false;
};
//上传作业按钮回调
const uploadHomeWork = (row) => {
    console.log(row);
  if (isSubmissionTimeExceeded(row.CreateAt)) {
    ElMessage.error("作业提交时间已过，无法上传作业");
    return;
  }
  Visible.value = true
  parentId.value = row.currentId
  currentId.value = row._id
};
const handleSizeChange = () => {
  getWorkList();
};
const handleCurrentChange = () => {
  getWorkList();
};
//添加作业按钮回调
const addWork = () => {
  centerDialogVisible.value = true;
};
//作业详情按钮回调
const WorkDetail = async (row) => {
  workShow.value = true;
  detaliLoading.value = true;
  let result = await getWorkDetalAPI(row._id);
  studentList.value = result.data;
  detaliLoading.value = false;
};
//删除作业
const deleteWork = async (row) => {
  ElMessageBox.confirm("此操作将永久删除该作业, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let result = await deleteStudentWorkAPI(row._id);
      if (result?.code == 200) {
        ElMessage.success("删除成功");
        workShow.value = false;
        getWorkList();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
const deleteHomeWork = async (row) => {
  ElMessageBox.prompt("请输入你的密码", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputType:'password'
  })
    .then( async ({ value }) => {
        let result = await deleteHomeWorkAPI({parentId:row.currentId,password:value})
        if(result.code==200){
          ElMessage.success('删除成功')
          getWorkList()
        }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
</script>

<style lang="scss" scoped>
.box {
  .top {
    margin-bottom: 10px;
  }
  .page {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
}
</style>
